<template>
  <common-card title="今日交易用户数" :value="numberFormat(orderUser)">
    <v-chart :option="getOption()" autoresize></v-chart>

    <template #bottom>
      <span>退货率</span>
      <span class="number">{{ returnRate }}%</span>
    </template>
  </common-card>
</template>
<script lang="ts">
export default {
  name: "TodayUsers",
};
</script>
<script lang="ts" setup>
import useFormat from "../../../hooks/useFormat";
import { useDataStore } from "../../../stores/reportData";
import { computed } from "vue";
// 格式化数字的方法
const { numberFormat } = useFormat();
// 获取数据的仓库
const dataStore = useDataStore();
// 今日的交易用户数
const orderUser = computed(() => dataStore.reportData.orderUser);
const returnRate = computed(() => dataStore.reportData.returnRate);
const orderUserTrend = computed(() => dataStore.reportData.orderUserTrend || []);
const orderUserTrendAxis = computed(() => dataStore.reportData.orderUserTrendAxis || []);

const getOption = () => {
  return {
    // 横轴的数据配置
    xAxis: { data: orderUserTrendAxis.value },

    // 纵轴的数据配置
    yAxis: { show: false },
    //系列组件
    series: [
      {
        name: "实时的交易量",
        type: "bar",
        data: orderUserTrend.value,
        barWidth: "60%",
      },
    ],
    // 距离容器四周的位置
    grid: { left: 0, top: 0, right: 0, bottom: 0 },
    color: "#3398db",
    // 提示框
    tooltip: { trigger: "axis" },
  };
};
</script>
<style lang="scss" scoped></style>
